<template>
  <div class="logOn">
    <!-- 顶部导航栏 -->
    <van-nav-bar :placeholder="true" :fixed="true" right class="bgccc">
      <template #left>
        <div>
          <van-icon
            class-prefix="iconfont"
            name="31fanhui1"
            size="18"
            @click="onClickLeft"
          />
        </div>
      </template>
      <template #title> <span>登录</span> </template>
      <template #right>
        <div>
          <van-icon class-prefix="iconfont" name="gengduo1" size="18" />
        </div>
      </template>
    </van-nav-bar>

    <!-- 用户输入 -->
    <van-cell-group class="userInput">
      <van-field
        v-model="value"
        placeholder="请输入用户名/手机号/邮箱"
        :clearable="true"
      />
      <van-field
        v-model="password"
        :type="onBiyanTF ? 'text' : 'password'"
        placeholder="请输入密码"
        :clearable="true"
      >
        <template #extra
          >&nbsp;
          <van-icon
            class-prefix="iconfont"
            :name="onBiyanTF ? 'yanjing' : 'biyanjing'"
            @click="onBiyan"
          ></van-icon>
          <span>&nbsp;|&nbsp;</span>
          <span>忘记密码</span>
        </template>
      </van-field>
      <div>
        <van-button round type="danger" size="large" loading-text="...加载中"
          >登录</van-button
        >
      </div>
      <div class="quickLogonBox">
        <van-button class="quickLogon">快速注册</van-button>
      </div>
    </van-cell-group>
    <!-- 其他登录方式 -->
    <van-divider class="otherLogin">其他登录方式</van-divider>
    <van-grid :border="false" class="otherLoginCon">
      <van-grid-item icon-prefix="iconfont" icon="qq" text="QQ" />
      <van-grid-item icon-prefix="iconfont" icon="weixin" text="微信" />
    </van-grid>
    <br />
    <van-row type="flex" justify="center">
      <van-col>登录即代表您已同意</van-col>
      <van-col><span class="Colblue">知心购隐私政策</span></van-col>
    </van-row>
  </div>
</template>

<script>
import Vue from 'vue';
import {
  NavBar,
  Icon,
  Field,
  CellGroup,
  Button,
  Divider,
  Grid,
  GridItem,
  Col,
  Row,
  Toast,
} from 'vant';

Vue.use(Row);
Vue.use(Col);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Divider);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(Button);
export default {
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1);
    },
    onBiyan() {
      this.onBiyanTF = !this.onBiyanTF;
    },
  },
  data() {
    return {
      value: null,
      password: null,
      onBiyanTF: null,
    };
  },
};
</script>

<style lang="scss">
.bgccc > .van-nav-bar {
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.quickLogonBox {
  position: relative;
  top: 0;
  left: 0;
}
.quickLogon {
  position: absolute;
  right: 0;
  border: none;
}
.quickLogon::before {
  background-color: rgba(0, 0, 0, 0);
}
.userInput {
  margin-top: 50px;
}
.otherLogin {
  margin-top: 100px;
}
.otherLoginCon {
  justify-content: center;
}
.Colblue {
  color: blue;
}
</style>

